<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>
<button onclick="click1()">ajax</button>
<div id="content"></div>
<script>
  function click1(){
    fetch('http://localhost:7777/test')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        content.innerHTML = myJson.name
      });
  }
  //↑ 升级后并不会影响正常的http请求

  /** 可以跨域(不像上面的http, 如果你不是在http://localhost:7777这个域下进行请求时会报跨域错误的(如果服务端没有配置))*/
  //没错 WebSocket 原生就支持
  //https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
  const socket = new WebSocket('ws://localhost:8888');

  /* open Fired when a connection with a WebSocket is opened.
Also available via the onopen property.
  */
  socket.onopen = function () {
    console.log('客户端连接上了服务器');
    socket.send('hello');
  };

  socket.onmessage = function (event) {
    console.log('服务器回复为:' + event.data);
  };
</script>
</body>
</html>
